import { vw } from "@/common/dimensions";
import LazyImage from "@/components/LazyImage";
import NavHeader from "@/components/NavHeader";
import { categoryListAtom, activeCategoryIdAtom, categoryItemType, SceneItemType, tplImageItemType } from "@/store/home";
import { LinearGradient } from "expo-linear-gradient";
import { useAtom } from "jotai";
import React, { useEffect, useState } from "react";
import { ScrollView, StyleSheet, Text, TouchableOpacity, View } from "react-native";
import FooterButton from "./FooterButton";
export default function FaceSwap(props:{id:number}) {
	let { id } = props;
    // 首页频道列表
    const [categoryList] = useAtom(categoryListAtom);
    // 当前选中的频道Id
    const [activeCategoryId] = useAtom(activeCategoryIdAtom);
    // 当前模板的标题
    const [navTitle, setNavTitle] = useState<string>("");
	// large图片
	const [largeImage , setLargeImage] = useState("")
	// 模板是否为收费模板
	const [chargeType, setChargeType] = useState('')
	// 轮播图数据
	const [ tplImageList , setTplImageList ] = useState<tplImageItemType[]>([])
	useEffect(() => {
        const foundCategory = categoryList.find((item: categoryItemType) => item.id === activeCategoryId)?.sceneList.find((item: SceneItemType) => item.id === id) as SceneItemType;
		const { charge_type, json_content: { cn: { title }}} = foundCategory;
		setNavTitle(title);
		setChargeType(charge_type)
		if(foundCategory.tpl_image_list){
			setLargeImage(foundCategory.tpl_image_list[0].cat_s_image)
			setTplImageList(foundCategory.tpl_image_list)
		}
    }, [id, categoryList, activeCategoryId]);

	const onPressCreate = () =>{

	}

	return (
		<View>
			<LinearGradient
                colors={["#fdfaf2", "#fff"]}
                style={styles.container}
                start={{ x: 0, y: 0 }}
                end={{ x: 0, y: 1 }}
            >
				<NavHeader navTitle={navTitle} />
				<View
                    style={styles.coverImageContainer}
                >
                    {largeImage && (
                        <LazyImage
                            uri={largeImage}
                            style={styles.largeImage}
                            defaultSource={require("@/assets/common/perch.png")}
                        />
                    )}
                </View>
			</LinearGradient>
			<View style={{backgroundColor:"#fff" , paddingHorizontal: 4 * vw}}>
                <Text style={{marginVertical:4 * vw , fontWeight:600, fontSize:16}}>选择你喜欢的造型</Text>
				<ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
					{tplImageList.map(item => (
						<TouchableOpacity key={item.id} onPress={()=> setLargeImage(item.cat_s_image)} >
							<LazyImage
								style={[styles.tplImage , largeImage === item.cat_s_image && styles.activeTplImage  ]}
								uri={item.cat_s_image}
								defaultSource={require('@/assets/common/perch.png')}
							/>
						</TouchableOpacity>
					))}
				</ScrollView>
                <FooterButton onPressCreate={onPressCreate} />
            </View>
		</View>
	);
}

const styles = StyleSheet.create({
    container: {
        paddingHorizontal: 4 * vw,
        paddingTop: 10 * vw,
    },
	coverImageContainer: {
        marginTop: 24
    },
	largeImage:{
		width: 92 * vw,
        height: 122 * vw,
        borderRadius: 24
	},
	tplImage:{
		width:21 * vw,
		height:27* vw,
		borderRadius:12,
		marginRight:2*vw
	},
	activeTplImage:{
		borderWidth:2,
		borderColor:"#007acc"
	}
});

